<template>
  <el-card class="box-card" shadow="never">
    <div slot="header" class="clearfix">
      <span>修改密码</span>
    </div>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      label-position="left"
      class="demo-ruleForm"
    >
      <el-form-item label="原密码" prop="password">
        <el-input
          type="password"
          v-model.number="ruleForm.password"
          placeholder="请输入原密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input
          type="password"
          v-model.number="ruleForm.newPassword"
          placeholder="请输入新密码"
        ></el-input>
        <span>密码长度为6～32位</span>
      </el-form-item>
      <el-form-item label="确认新密码" prop="newPassword2">
        <el-input
          type="password"
          v-model.number="ruleForm.newPassword2"
          placeholder="请再次输入新密码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >保存设置</el-button
        >
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
// import { updatePassword } from "@/api/api";
import {mapState} from "vuex"
export default {
  data() {
    return {
      ruleForm: {
        id: "",
        password: "",
        newPassword: "",
        newPassword2: "",
      },
      rules: {
        password: [
          {
            validator: (rule, value, callback) =>
              this.ruleFormCallback(rule, value, callback, "password"),
            trigger: "blur",
          },
        ],
        newPassword: [
          {
            validator: (rule, value, callback) =>
              this.ruleFormCallback(rule, value, callback, "newPassword"),
            trigger: "blur",
          },
        ],
        newPassword2: [
          {
            validator: (rule, value, callback) =>
              this.ruleFormCallback(rule, value, callback, "newPassword2"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed:{
    ...mapState(['userInfo'])
  },
  created() {
    this.ruleForm.id = this.userInfo.id;
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$refs.ruleForm.resetFields()
        } else {
          return false;
        }
      });
    },
    async ruleFormCallback(rule, value, callback, prop) {
      if (prop == "password") {
        //原密码验证
        if (this.ruleForm.password.toString()?.trim().length == 0) {
          callback(new Error("密码不能为空"));
        } else if (this.ruleForm.newPassword == this.ruleForm.newPassword2) {
          if (
            this.ruleForm.newPassword.toString()?.trim().length >= 6 &&
            this.ruleForm.newPassword.toString()?.trim().length <= 32
          ) {
            const res = await this.$api.updatePassword(this.ruleForm);
            if (res.code != 200) {
              callback(new Error(res.data));
            }
            callback();
          }
        }
      } else if (prop == "newPassword") {
        //新密码验证
        if (this.ruleForm.newPassword.toString()?.trim().length == 0) {
          callback(new Error("新密码不能为空"));
        } else if (this.ruleForm.newPassword == this.ruleForm.newPassword2) {
          if (
            this.ruleForm.newPassword.toString()?.trim().length < 6 ||
            this.ruleForm.newPassword.toString()?.trim().length > 32
          ) {
            callback(new Error("密码长度为6～32位"));
          }
        }
      } else if (prop == "newPassword2") {
        //确认新密码验证
        if (this.ruleForm.newPassword2.toString()?.trim().length == 0) {
          callback(new Error("确认新密码不能为空"));
        } else if (this.ruleForm.newPassword !== this.ruleForm.newPassword2) {
          callback(new Error("两次密码不一样"));
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-form {
  .el-input__suffix {
    display: none;
  }
}
</style>